<template>
    <div class="config-box">
      <div class="c-title">
        <div class="flex-c c-title-name">
          <i @click="isOpen=!isOpen" style="cursor: pointer;" :class="isOpen?'el-icon-caret-bottom':'el-icon-caret-right'"></i>
          <div style="margin-left:5px;">{{ titName }}</div>
        </div>
        <el-button type="text" @click.stop="$emit('editBtn')">编辑</el-button>
  
      </div>
      <div class="items" v-show="isOpen">
        <div class="flex-c item" v-for="item in dataList" :key="item.label+item.value">
          <div style="min-width:80px;">{{item.label}}:</div>
          <div style="min-width:85px;">{{item.value}}</div>
        </div>
  
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props:['dataList','titName'],
      data(){
        return {
          isOpen:true,
        }
      }
    }
  </script>
  
  <style scoped lang="less">
    .config-box{
      border: 1px rgba(233, 233, 233, 1) solid;
      border-bottom: 0px;
      .c-title{
        height: 48px;
        border-bottom: 1px rgba(233, 233, 233, 1) solid;
        background-color: #fafafa;
        display: flex;
        align-items: center;
        .c-title-name{
          margin:0 20px;
        }
      }
      .items{
        padding: 25px;
        // height: 300px;
        border-bottom: 1px rgba(233, 233, 233, 1) solid;
        display: flex;
        justify-content: flex-start;
        flex-flow: row wrap;
        .item{
          width: 25%;
          margin-bottom: 20px;
        }
      }
  
    }
  </style>
  